<template>
  <div class="headerView">
    <el-row>
      <el-col :span="7" class="col">
        <div class="left">
          <el-button icon="el-icon-menu" size="mini" @click="handMenuView" class="btn"></el-button>
          <el-breadcrumb separator="/" class="nav">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/setting' }">系统管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/good' }">商品/订单</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/permissonC' }">权限/授权</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </el-col>
      <el-col :span="10" class="col">
        <div class="middle">
          <b>欢迎您的登录:{{ this.$store.state.user.username }}</b>
        </div>
      </el-col>
      <el-col :span="7" class="col">
        <div class="right">
      <el-dropdown>
        <span class="el-dropdown-link">
          <img src="../assets/yin.jpg" alt="" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item class="mycenter">个人中心</el-dropdown-item>
          <el-dropdown-item @click.native="logout">
            退出登录
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
      </el-col>

    </el-row>

    
  </div>
</template>

<script>
export default {
  name: "headerView",
  data() {
    return {};
  },
  methods: {

    logout() {
      this.$router.push("/login");
    },
    handMenuView() {
      this.$store.commit('collapseView');
    },
  },
};
</script>

<style lang="less" scoped>
.headerView {
background-color: #21a0ff;
 .col{
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 53px;
  .mycenter {
  text-align: center;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;

  img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
}
}

.left {
  display: flex;
  
  align-items: center;
  justify-content: space-between;
  .btn {
    flex: 0.1;
    margin-right: 10px;
  }
  .nav {
    flex: 3;


  }
}

.middle {
  flex: 4;
}

.right {
  flex: 1.5;
  text-align: right;
}

.el-icon-arrow-down {
  font-size: 12px;
}


}
</style>